<template>
  <el-card shadow="never">
    <el-row>我的保证金</el-row>
  </el-card>
  <el-card shadow="never" style="margin-top: 10px">
    <el-row align="middle" justify="center" style="margin: 20px 0">
      <div style="display: block">
        <el-popover trigger="hover" width="300px" placement="right">
          <template #reference>
            <div>
              <span style="font-size: 16px">保证金余额</span>
              <el-icon style="margin-left: 5px">
                <WarningFilled/>
              </el-icon>
            </div>
          </template>
          <el-card style="background-color: #f83685">
            <p>1、保证金最低额1000元；多充不限。保证金不足最低额时，相关商品将下架、相关权限将冻结。</p>
            <p>2、保证金最低额（不可提现余额）的提现条件：相关商品已全部下架或取消发布，相关订单全部处于“已完成”状态，您已结清与平台的结算。超出最低额多充的金额，不受提现条件约束、可随时提现。</p>
            <p>3、若您未履行所发布商品的相关保障、条款或购买售后流程，违反商品交易规范，平台使用该保证金进行赔付（即相应扣减您的保证金）。</p>
            <p>4、平台扣减保证金进行赔付的金额标准：按相关约定条款；若无相关约定条款则按相关实际损失。其中，违反商品交易规范、向平台外引流的用户，本平台每次扣减其相当于所涉商品单价10%（最低不低于25元）的保证金。</p>
            <p>说明：保证金是指根据您注册成为本平台用户时在线签署的《用户服务协议》以及本平台相关规则的规定而缴存作为金钱质押并用于担保您对于本平台相关规则规定的履行和遵守的违规风险保证资金。</p>
          </el-card>
        </el-popover>
      </div>
    </el-row>
    <el-row justify="center" style="margin-top: 20px">
      <div style="font-size: 26px;color: #111;font-weight: 700}">
        <span>￥0.00</span>
      </div>
    </el-row>
    <el-row justify="center" style="margin: 20px 0">
      <el-button text>
        待补缴金额：<span style="color: #fe35b3">￥0.00</span>
        <el-icon>
          <ArrowRight/>
        </el-icon>
      </el-button>
    </el-row>
    <el-row justify="center">
      <div style="margin-right: 10px">
        <p style="color: #7d8090;font-size: 14px">可提现余额</p>
        <p style="text-align: center;margin: 10px;color: #121212;font-size: 20px;">0.00</p>
      </div>
      <div>
        <p style="color: #7d8090;font-size: 14px">不可提现余额</p>
        <p style="text-align: center;margin: 10px;color: #121212;font-size: 20px;">0.00</p>
      </div>
    </el-row>
    <el-row justify="center">
      <el-button bg style="margin-right: 40px;width: 170px;height:50px;color: #f93684;border: 1px solid #f93684">提现
      </el-button>
      <el-button size="large" style="color: #fff;background: #f93684;width: 170px;height:50px">充值
      </el-button>
    </el-row>
    <el-row justify="center">
      <el-popover placement="top" width="200px" trigger="hover">
        <template #reference>
          <div style="margin-top: 100px ">
            <el-icon size="large">
              <ChatDotSquare/>
            </el-icon>
            <span>联系客服</span>
          </div>
        </template>
        <el-card style="font-size: 12px;text-align: center">
          <p>打开app扫码</p>
          <div>联系客服</div>
          <div style="display: flex;align-content: center;justify-content: center">
            <img style="width: 50%" src="@/assets/images/kf.png" alt="扫码添加客服微信">
          </div>
        </el-card>
      </el-popover>

    </el-row>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-row align="middle" style="border-bottom:1px solid #e3e3e3;"><p style="margin: 10px 0 30px 0">保证金明细</p></el-row>
    <el-row justify="center">
      <p style="color:#909399;font-size: 14px;margin-top:20px">暂无数据</p>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import {WarningFilled, ArrowRight, ChatDotSquare} from '@element-plus/icons-vue'
</script>

<style scoped>

</style>
